<template>
  <div>
    <!-- 加载loading展示 -->
    <loading v-show="isShowLoading" />
    <div class="home" v-show="!isShowLoading">
      <NavBar class="home-nav">
        <div slot="center">购物街</div>
      </NavBar>

      <scroll class="content" ref="scroll" :probeType="3" @scroll="contentScroll" :pullUpLoad="true"
        @pullingUp="loadMore()">
        <!--轮播图-->
        <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide v-for="item in banner.list">
            <div class="item"><a :href="item.link"><img :src="item.image" class="swiperimgitem"></a></div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
        <!--分类-->
        <RecommendView :recommend="recommend"></RecommendView>
        <!--本周排行-->
        <a href="https://act.mogujie.com/zzlx67"><img src="~assets/img/feature_bg.jpg" style="width:100%"></a>
        <!--流行、新款、精选 按钮-->
        <tab @ChangecurrentType="ChangecurrentType">
          <template v-slot:tab-Liux>
            <GoodsList :goods="goods['pop'].list"></GoodsList>
          </template>
          <template v-slot:tab-Xinkuan>
            <GoodsList :goods="goods['new'].list"></GoodsList>
          </template>
          <template v-slot:tab-Jxuan>
            <GoodsList :goods="goods['sell'].list"></GoodsList>
          </template>
        </tab>
      </scroll>
      <!--返回顶部按钮-->
      <backTop @click.native="backclick()" v-show="isShowbackTop"></backTop>
    </div>
  </div>
</template>

<script>
  // @ is an alias to /src
  import NavBar from 'components/navbar/NavBar'
  import {
    getHomeMultidata,
    getHomeGoods
  } from 'network/home'
  import RecommendView from 'components/Home/RecommendView'
  import Tab from 'components/Home/Tab'
  import GoodsList from 'components/Goods/GoodsList'
  import 'swiper/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import Scroll from 'components/scroll/scroll'
  import backTop from 'components/backTop/backTop'
  import { loadingMixin } from 'common/mixin'
  import { debounce } from 'common/utils'
  export default {
    name: 'Home',
    //组件注册
    components: {
      NavBar,
      swiper,
      swiperSlide,
      RecommendView,
      Tab,
      GoodsList,
      Scroll,
      backTop,
    },
    //混入
    mixins: [loadingMixin],
    //数据对象
    data() {
      return {
        isLoading: false,
        banner: [],
        recommend: [],
        currentType: 'pop',
        goods: {
          'pop': { page: 1, list: [] },
          'new': { page: 1, list: [] },
          'sell': { page: 1, list: [] },
        },
        isShowbackTop: false,

        // swiper轮播的参数           
        swiperOption: {
          // 滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
          // 上一张，下一张
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          //开启循环切换
          loop: true,
          //设置自动切换图片
          autoplay: true,
          //设置触碰后自动切换停止
          disableOnInteraction: true,
        }
      }
    },
    methods: {
      //请求商品数据
      getHomeGood(type) {
        const page = this.goods[type].page + 1;
        getHomeGoods(type, page).then(res => {
          this.goods[type].list.push(...res.data.data.list);
          this.goods[type].page = this.goods[type].page + 1;
        })
      },
      //返回顶部按钮
      backclick() {
        this.$refs.scroll.scrollTo(0, 0, 500)
      },
      //自动显示返回顶部按钮
      contentScroll(position) {
        this.isShowbackTop = -position.y > 1000
      },
      //加载更多数据
      loadMore() {
        //console.log("加载更多", this.currentType);
        this.getHomeGood(this.currentType)
        this.$refs.scroll.finishPullUp()
      },
      //改变 流行/新款/ 精选 选项卡
      ChangecurrentType(currentType) {
        this.currentType = currentType;
      },
    },
    //页面加载完成后
    created() {
      //请求推荐商品
      getHomeMultidata().then(res => {
        this.isLoading = true;
        this.banner = res.data.data.banner;
        this.recommend = res.data.data.recommend;
        this.isLoading = false;
      });
      //请求商品数据
      this.getHomeGood('pop');
      this.getHomeGood('new');
      this.getHomeGood('sell');
    },
    mounted() {
      //监听图片是否加载完成
      const refresh = debounce(this.$refs.scroll.refresh, 200)
      this.$bus.$on('homeitemImageLoad', () => {
        refresh()
      })
      this.$nextTick(() => {
        //隐藏loading
        setTimeout(() => {
          this.isShowLoading = false;
        }, 80)
      })

  }
  }
</script>


<style scoped>
  .home {
    height: 100vh;
  }

  .home-nav {
    background-color: hotpink;
    color: white;

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }

  .swiperimgitem {
    clear: both;
    display: block;
    margin: auto;
    height: 10rem;
    width: 100%;
  }

  .content {
    margin-top: 44px;
    height: calc(100vh - 60px);
    overflow: hidden;
  }
</style>